<template>
	<view>
		<view style="position: fixed; top: 0; z-index: 2; width: calc(100% - 40rpx); background-color: #F4F5F6;">
			<view class="uni-form-item">
				<view class="title">货主代码</view>
				<picker @change="e => ownerIndex = e.target.value" :value="ownerIndex" :range="ownerList" range-key="label" style="flex: 1;">
					<view class="uni-input border">{{ownerList[ownerIndex].label}}</view>
				</picker>
			</view>
			<view class="uni-form-item">
				<view class="title">货品代码</view>
				<view class="uni-input-view">
					<input class="uni-input" v-model="params.code" :focus="focus[0]" @confirm="handleConfirmCode" placeholder="请扫描货品代码" />
					<image src="/static/scan.png" class="scan" @click="handleScanCode" />
				</view>
			</view>
			<view class="uni-form-item">
				<view class="title">货品条码</view>
				<view class="uni-input-view">
					<input class="uni-input" v-model="params.barCode" :focus="focus[1]" placeholder="请扫描货品条码" />
					<image src="/static/scan.png" class="scan" @click="handleScanBarCode" />
				</view>
			</view>
			<view class="uni-btn-v">
				<button type="primary" @click="handleSearch">查询</button>
			</view>
		</view>
		<view class="list-card" style="margin-top: 440rpx;">
			<uni-card v-for="item in list" :key="item.id" :title="'货品代码：' + item.code">
				<view class="item">
					<view>
						<label>货品名称：</label>
						<text>{{item.name || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>货主代码：</label>
						<text>{{item.ownerCode || '-'}}</text>
					</view>
					<view class="item-content">
						<label>包装代码：</label>
						<text>{{item.packCode || '-'}}</text>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';

	export default {
		components: {
			uniCard
		},
		data() {
			return {
				focus: [true, false],
				params: {
					limit: 1000,
					page: 1,
					code: null,
					barCode: null,
				},
				ownerIndex: 0,
				ownerList: [{
					value: '',
					label: '请选择货主代码'
				}],
				list: []
			}
		},
		onLoad() {
			this.$api.inBill.ownerList({
				limit: 1000,
				page: 1
			}).then(res => {
				this.ownerList = res.data.map(v => {
					return {
						value: v.id,
						label: `${v.code}-${v.shortName}`
					}
				});
				this.ownerList.splice(0, 0, {
					value: '',
					label: '请选择货主代码'
				});
			});
		},
		methods: {
			handleScanCode() {
				if (!this.ownerIndex) {
					return uni.showToast({
						title: '请选择货主代码',
						icon: 'none'
					});
				}
				this.$scan(res => {
					this.params.code = res;
					this.handleConfirmCode();
				});
			},
			handleConfirmCode() {
				if (!this.ownerIndex) {
					return uni.showToast({
						title: '请选择货主代码',
						icon: 'none'
					});
				}
				this.$api.goods.listScan({
					ownerId: this.ownerList[this.ownerIndex].value,
					code: this.params.code
				}).then(res => {
					if (!res.data.length) {
						return uni.showToast({
							title: '未匹配到货品',
							icon: 'none'
						});
					}
					this.params.code = res.data[0].code;
					this.handleFocus(1);
				});
			},
			handleScanBarCode() {
				this.$scan(res => {
					this.params.barCode = res;
					this.handleFocus();
				});
			},
			handleFocus(index) {
				this.focus.map((v, i) => this.$set(this.focus, i, false));
				index && setTimeout(() => this.$set(this.focus, index, true), 100);
			},
			handleSearch() {
				uni.showLoading({
					title: '加载中'
				});
				this.fetch();
			},
			fetch() {
				const _params = Object.assign({}, this.params, {
					ownerId: this.ownerIndex ? this.ownerList[this.ownerIndex].value : null
				});
				this.$api.goods.list(_params).then(res => {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					this.list = res.data;
					uni.hideLoading();
					if (!this.list.length) {
						uni.showToast({
							title: '未匹配到货品',
							icon: 'none'
						});
					}
				}, () => uni.hideLoading());
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}

	.uni-load-more {
		margin-top: -30rpx;
	}
</style>
